<template>
  <view :class="['wrap', isVip && !expire ? '' : 'paddingBottom']">
    <img
      v-if="isVip && !expire"
      class="img-vipBg"
      src="https://ainengli.hzjrsw.com/jkhx/weight/vipBg.png"
      alt=""
    />
    <view class="user_info">
      <img
        class="img"
        v-if="state.userInfo && state.userInfo.gender == '女性'"
        src="@/static/image/woman.png"
        alt=""
      />
      <img class="img" v-else src="@/static/image/man.png" alt="" />
      <img
        v-if="isVip && !expire"
        class="img avatar"
        mode="scaleToFill"
        src="@/static/image/vip.png"
        alt=""
      />
      <img
        v-if="isVip && expire"
        class="img avatar"
        mode="scaleToFill"
        src="@/static/image/vip-expire.png"
        alt=""
      />
      <view class="name">{{ state.userInfo && state.userInfo.patName }}</view>
      <view
        v-if="state.userInfo && state.userInfo.relation"
        :class="['relation', isVip && !expire ? 'green' : '']"
        >{{ state.userInfo.relation }}</view
      >
    </view>
    <view v-if="isVip && expire" class="expired">已过期</view>
    <view
      v-if="isVip && !expire && state.userInfo && state.userInfo.expireTime"
      class="expire-time"
    >
      {{ parseTime(state.userInfo.expireTime, '{yy}年{m}月{dd}日') }}到期
    </view>
    <!-- 体重管理 -->
    <view v-if="weightManagePlanData" class="weight-mana">
      <view class="weight-top">
        <text class="weight-basic-text">单位：kg</text>
        <view @tap="resetPop = true" class="reset">重设目标</view>
      </view>
      <view class="weight-mode">
        <view class="reduced-weight">
          <text class="weight-basic-text">已减去</text>&nbsp;
          <text class="weight-value">{{ getLoseWeight() }}</text
          >&nbsp;
          <text class="weight-basic-text">(kg)</text>
        </view>
        <view class="weight-progress">
          <view class="progress-bar" :style="{ left: `calc(${weightPercent}% - 12rpx)` }" />
          <view class="progress-bar-bg" :style="{ width: `${weightPercent}%` }" />
        </view>
        <view class="weight-grid">
          <view class="weight-item">
            <text class="weight-basic-text">初始体重</text>
            <text class="weight-value">{{ weightManagePlanData.originWeight || 0 }}</text>
          </view>
          <view class="weight-item">
            <text class="weight-basic-text">当前体重</text>
            <text class="weight-value">{{ weightManagePlanData.currentWeight || 0 }}</text>
          </view>
          <view class="weight-item">
            <text class="weight-basic-text">目标体重</text>
            <text class="weight-value">{{ weightManagePlanData.targetWeight || 0 }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- BMI -->
    <view class="bmi">
      <view class="top">
        <view class="unit">
          当前BMI
          <view
            :class="[
              'tag',
              state.bmi <= 18.5
                ? ''
                : state.bmi > 18.5 && state.bmi <= 24
                  ? 'green'
                  : state.bmi > 24 && state.bmi <= 28
                    ? 'orange'
                    : 'red'
            ]"
          >
            {{
              state.bmi <= 18.5
                ? '偏低'
                : state.bmi > 18.5 && state.bmi <= 24
                  ? '正常'
                  : state.bmi > 24 && state.bmi <= 28
                    ? '超重'
                    : '肥胖'
            }}</view
          >
        </view>
        <view class="num">{{ state.bmi }}</view>
      </view>
      <view class="range">
        <view class="range-num">
          <view class="nums" style="margin-left: 62rpx">18.5</view>
          <view class="nums">24</view>
          <view class="nums" style="margin-right: 76rpx">28</view>
          <img
            class="img-arrow"
            :style="{
              top: '10rpx',
              left: `calc(
            ${
              state.bmi < 18.5
                ? (state.bmi / 18.5) * 25 - 3
                : state.bmi >= 18.5 && state.bmi < 24
                  ? ((state.bmi - 18.5) / 7.5) * 25 + 22
                  : state.bmi >= 24 && state.bmi < 28
                    ? ((state.bmi - 24) / 8) * 25 + 47
                    : state.bmi >= 28 && state.bmi < 40
                      ? ((state.bmi - 28) / 12) * 25 + 72
                      : '97'
            }%`
            }"
            src="@/static/image/arrow-down.png"
            alt=""
          />
        </view>
        <view class="range-color">
          <view class="block low" />
          <view class="block normal" />
          <view class="block high" />
          <view class="block fat" />
        </view>
        <view class="range-text">
          <text>偏低</text>
          <text>正常</text>
          <text>偏高</text>
          <text>肥胖</text>
        </view>
      </view>
      <view class="cell">
        <view class="left">基础代谢</view>
        <view class="right">{{ state.base || 0 }}<text>kcal</text></view>
      </view>
      <!-- <view class="cell">
        <view class="left">推荐摄入</view>
        <view class="right">{{ state.recommend }}<text>kcal</text></view>
      </view> -->
    </view>
    <view class="box bgColor1">
      <view class="top">
        <view class="top_title">智能食谱</view>
        <view v-if="!state.userInfo.dietQuestionState" class="top_button">限免</view>
        <view v-else @tap="toFoodRecommend" class="take-more"
          >查看全部<img class="img-more" src="@/static/image/my-arrow-right.png" alt=""
        /></view>
      </view>
      <view v-if="!state.userInfo.dietQuestionState" @tap="toFoodQuestion" class="content">
        <img
          class="img_left"
          src="https://ainengli.hzjrsw.com/jkhx/weight/food-recommend.png"
          alt=""
        />
        <view class="right">
          <view class="right_title">个性化推荐每日食谱</view>
          <view class="right_content">量身定制营养全面、配比均衡的食谱方案</view>
        </view>
      </view>
      <view v-else class="meal-content">
        <view v-if="JSON.stringify(mealInfo) != '{}'" class="meal">
          <view class="title"
            >今日{{ hour < 9 ? '早餐' : hour >= 9 && hour < 14 ? '午餐' : '晚餐' }}</view
          >
          <view
            v-for="(item, index) of hour < 9
              ? mealInfo.breakfast.food_items
              : hour >= 9 && hour < 14
                ? mealInfo.lunch.food_items
                : mealInfo.dinner.food_items"
            :key="index"
            class="items"
          >
            <view class="meal-name">{{ item.name }}</view>
            <view class="meal-components">
              <text v-for="(i, idx) of item.ingredients" :key="idx">
                {{ i.name + '*' + i.amount }}{{ idx + 1 < item.ingredients.length ? '，' : '' }}
              </text>
            </view>
          </view>
        </view>
        <view v-else style="padding: 32rpx 0; color: #999; text-align: center">暂无推荐饮食</view>
        <view
          v-if="
            JSON.stringify(mealInfo) != '{}' &&
            (hour == 9 ||
              (hour == 10 && minutes <= 30 && mealInfo.breakfast_plus.food_items.length > 0) ||
              (hour >= 14 && hour < 16 && mealInfo.lunch_plus.food_items.length > 0) ||
              (hour >= 19 && mealInfo.dinner_plus.food_items.length > 0))
          "
          class="meal"
        >
          <view class="title">
            今日{{
              hour == 9 || (hour == 10 && minutes <= 30)
                ? '早加餐'
                : hour >= 14 && hour < 16
                  ? '午加餐'
                  : hour >= 19
                    ? '晚加餐'
                    : ''
            }}
          </view>
          <view
            v-for="(item, index) of hour == 9 || (hour == 10 && minutes <= 30)
              ? mealInfo.breakfast_plus.food_items
              : hour >= 9 && hour < 14
                ? mealInfo.lunch_plus.food_items
                : mealInfo.dinner_plus.food_items"
            :key="index"
            class="items"
          >
            <view class="meal-name">{{ item.name }}</view>
            <view class="meal-components">
              <text v-for="(i, idx) of item.ingredients" :key="idx">
                {{ i.name + '*' + i.amount }}{{ idx + 1 < item.ingredients.length ? '，' : '' }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="box bgColor2">
      <view class="top">
        <view class="top_title">运动方案</view>
        <view v-if="!state.userInfo.sportQuestionState && !state.userInfo.isVip" class="top_button"
          >限免</view
        >
        <view v-else @tap="toSportsManage" class="take-more"
          >查看全部<img class="img-more" src="@/static/image/my-arrow-right.png" alt=""
        /></view>
      </view>
      <view v-if="!isVip" class="content">
        <img
          class="img_left"
          src="https://ainengli.hzjrsw.com/jkhx/weight/sports-recommend.png"
          alt=""
        />
        <view class="right">
          <view class="right_title">智能运动方案</view>
          <view class="right_content">评估身体现状，定制专属运动方案</view>
        </view>
      </view>
      <view v-else class="content">
        <view class="sports">
          <view class="sports-text">有氧运动</view>
          <view class="sport-icon">
            <icon type="" class="iconfont icons icon-paobu1" />
          </view>
          <view class="sports-text">跑步</view>
          <view class="sports-time">运动1小时</view>
        </view>
        <view class="sports">
          <view class="sports-text">抗阻运动</view>
          <view class="sport-icon">
            <icon type="" class="iconfont icons icon-youyong1" />
          </view>
          <view class="sports-text">游泳</view>
          <view class="sports-time">运动1.5小时</view>
        </view>
      </view>
    </view>
    <view class="box bgColor1">
      <view class="box_title">
        <view style="display: flex; align-items: center">
          <img class="title_img" src="@/static/image/vip-logo.png" />
          <view class="title_text">减重管理方案</view>
        </view>
        <view v-if="isVip && !expire && state.userInfo.pathId" @tap="toManage" class="take-more"
          >查看全部<img class="img-more" src="@/static/image/my-arrow-right.png" alt=""
        /></view>
      </view>
      <img v-if="!isVip || (isVip && expire)" class="back_img" src="@/static/image/diamond.png" />
      <view
        v-if="isVip && !expire && manageList.length == 0 && state.userInfo.pathId"
        class="no-data"
      >
        <image class="img_nodata" src="@/static/image/im-empty.png" />
        <view>今日暂无健康任务</view>
      </view>
      <view
        v-if="isVip && !expire && state.userInfo.pathId"
        :class="['list', loadMore ? '' : 'max-height']"
      >
        <view
          v-for="(item, index) of manageList"
          :key="index"
          :class="['item', isVip && !expire && state.userInfo.pathId ? '' : 'locked']"
        >
          <view class="top">
            <view class="title">
              <img
                v-if="item.templateType == '健康处方'"
                class="title_img"
                src="https://ainengli.hzjrsw.com/jkhx/prescription.png"
              />
              <img
                v-else-if="item.templateType == '健康监测'"
                class="title_img"
                src="https://ainengli.hzjrsw.com/jkhx/healthmMonitor.png"
              />
              <img
                v-else-if="item.templateType == '饮食方案'"
                class="title_img"
                src="@/static/image/food.png"
              />
              <img
                v-else-if="item.templateType == '运动方案'"
                class="title_img"
                src="@/static/image/sports.png"
              />
              <img
                v-else-if="item.templateType == '健康宣教'"
                class="title_img"
                src="https://ainengli.hzjrsw.com/jkhx/propaganda.png"
              />
              <img
                v-else-if="item.templateType == '健康随访'"
                class="title_img"
                src="https://ainengli.hzjrsw.com/jkhx/followUp.png"
              />
              <img
                v-else-if="item.templateType == '用药提醒'"
                class="title_img"
                src="https://ainengli.hzjrsw.com/jkhx/remind.png"
              />
              <img v-else class="title_img" src="https://ainengli.hzjrsw.com/jkhx/visit.png" />
              <text>{{ item.templateType }}</text>
            </view>
            <view class="time">{{ parseTime(item.planTime, '{mm}-{dd} {hh}:{ii}') }}</view>
          </view>
          <view class="bottom">
            <view class="text">{{ item.typeContent }}</view>
            <view
              @tap="targetType(item)"
              :class="[
                'click-btn',
                !item.isRead && item.dateStatus == 0
                  ? 'unfinished'
                  : !item.isRead && item.dateStatus == null
                    ? ''
                    : 'on'
              ]"
            >
              {{
                !item.isRead && item.dateStatus == 0
                  ? '未完成'
                  : !item.isRead && item.dateStatus == null
                    ? '去完成'
                    : '已完成'
              }}
            </view>
          </view>
        </view>
      </view>
      <view v-else class="list">
        <view class="item locked">
          <view class="top">
            <view class="title">
              <img class="title_img" src="https://ainengli.hzjrsw.com/jkhx/prescription.png" />
              <text>健康处方</text>
            </view>
            <view class="time">03-10 09：30</view>
          </view>
          <view class="bottom">
            <view class="text">您有一篇健康处方待查阅，点击阅读</view>
            <view class="click-btn finished">去完成</view>
          </view>
        </view>
      </view>
      <view
        v-if="isVip && !expire && manageList.length > 3"
        @tap="loadMore = !loadMore"
        class="down-more"
      >
        {{ loadMore ? '收起更多' : '查看更多' }}
        <img :class="['img-downmore', loadMore ? 'flip' : '']" src="@/static/image/down-more.png" />
      </view>
      <view v-if="!isVip || (isVip && expire)" @tap="toServerPackage" class="unlock">
        {{ expire ? '续费继续享受服务' : '解锁体重管理方案' }}
        <img class="more" src="@/static/image/more-white.png" />
      </view>
      <view v-if="isVip && !expire && !state.userInfo.pathId" class="overlay">
        {{
          !state.userInfo.tid && !state.userInfo.pathId
            ? '请耐心等待，正在为您匹配服务团队'
            : '请耐心等待，正在为您制定管理方案'
        }}
      </view>
    </view>
    <view class="box bgColor2">
      <view class="box_title">
        <view style="display: flex; align-items: center">
          <img class="title_img" src="@/static/image/vip-logo.png" />
          <view class="title_text">专属健管团队</view>
        </view>
      </view>
      <img v-if="!isVip || (isVip && expire)" class="back_img" src="@/static/image/diamond.png" />
      <view :class="['content', isVip && !expire && state.userInfo.tid ? '' : 'locked']">
        <img class="img_left" src="https://ainengli.hzjrsw.com/jkhx/weight/team.png" />
        <view class="right">
          <view class="right_title">健康管理团队</view>
          <view class="right_content">09:00-18:00 365天在线</view>
          <view @tap="toMessage" class="click-btn">立即咨询</view>
        </view>
      </view>
      <view v-if="!isVip || (isVip && expire)" @tap="toServerPackage" class="unlock">
        {{ expire ? '续费继续享受服务' : '解锁专属健康管理团队' }}
        <img class="more" src="@/static/image/more-white.png" />
      </view>
      <view v-if="isVip && !expire && !state.userInfo.tid" class="overlay padding-188">
        请耐心等待，正在为您匹配服务团队
      </view>
    </view>
    <view v-if="!isVip || (isVip && expire)" class="fixed">
      <button @tap="toServerPackage" class="fixed-btn">
        {{ expire ? '续费会员' : '解锁专属会员服务' }}
      </button>
    </view>
    <up-popup :show="resetPop" :round="16" mode="bottom" closeable @close="resetPop = false">
      <view class="title">重设减重目标</view>
      <view style="padding: 32rpx 32rpx 0">
        <view class="weight-reset-box">
          <view class="left">初始体重</view>
          <view class="right">
            <input
              type="digit"
              @blur="saveOrigin"
              class="popup_input"
              v-model="editWeight.origin"
              :border="false"
            />
            <text>kg</text>
            <!-- <img class="img-more" src="@/static/image/my-arrow-right.png" alt="" /> -->
          </view>
        </view>
        <view class="weight-reset-box">
          <view class="left">目标体重</view>
          <view class="right">
            <input
              type="digit"
              @blur="saveTarget"
              class="popup_input"
              v-model="editWeight.target"
              :border="false"
            />
            <text>kg</text>
            <!-- <img class="img-more" src="@/static/image/my-arrow-right.png" alt="" /> -->
          </view>
        </view>
        <view class="weight-reset-box">
          <view class="left">当前体重</view>
          <view class="right">
            <input
              type="digit"
              @blur="saveCurrent"
              class="popup_input"
              v-model="editWeight.current"
              :border="false"
            />
            <text>kg</text>
            <!-- <img class="img-more" src="@/static/image/my-arrow-right.png" alt="" /> -->
          </view>
        </view>
      </view>
      <view class="save">
        <button @tap="resetSave" class="save-btn">保存</button>
      </view>
    </up-popup>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import { reactive, ref, watch, nextTick } from 'vue'
import { getPatientInfo } from '@/pages/index/index.api'
import { taskDetail } from '@/api/hmm'
import { ai_recommend_food } from '@/api/food'
import { base_info } from '@/api/moreMessage'
import { weight_lose_info, reset_weight_lose_info } from './api'
import { parseTime } from '@/utils/tools'
import store from '@/store'

interface weightManagePlan {
  empi: string
  originWeight: number
  targetWeight: number
  pathId: number
  qneFinishedTime: string
  buyProductTime: string
  currentWeight: number
}

const isVip = ref(false)
const expire = ref(false)

const resetPop = ref(false)

const editWeight = ref({
  origin: 0,
  target: 0,
  current: 0
})
const weightManagePlanData = ref<weightManagePlan>({
  empi: '',
  originWeight: 0,
  targetWeight: 0,
  pathId: 0,
  qneFinishedTime: '',
  buyProductTime: '',
  currentWeight: 0
})
const weightPercent = ref<number>(0)

const mealInfo = ref({})
const hour = ref()
const minutes = ref()

const state = reactive({
  userInfo: {},
  loginInfo: {},
  base: 0,
  recommend: 1420,
  bmi: 0
})

const manageList = ref([])
const loadMore = ref(false)

onShow(() => {
  uni.removeStorageSync('healthManageTab')
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.loginInfo = uni.getStorageSync('userInfo') ? JSON.parse(uni.getStorageSync('userInfo')) : ''
  isVip.value = state.userInfo.isVip
  expire.value = !state.userInfo.isVip && state.userInfo.hasVip
  // 如果买了会员且没有分配方案则每次进来更新就诊人信息
  if (isVip.value && (!state.userInfo.tid || !state.userInfo.pathId)) {
    const params = {
      userId: state.loginInfo.userId,
      empi: state.userInfo.empi
    }
    base_info(params).then((res) => {
      if (res.data.tid || res.data.pathId) {
        state.userInfo = res.data
        state.loginInfo.patientInfo = res.data
        store.commit('SET_USERINFO', state.loginInfo)
      }
    })
  }
  init()
})

const init = () => {
  // 体重信息
  getPatientInfo({ empi: state.userInfo.empi }).then((res: any) => {
    weightManagePlanData.value = res.data
    if (res.data) {
      editWeight.value.origin = res.data.originWeight || 0
      editWeight.value.target = res.data.targetWeight || 0
      editWeight.value.current = res.data.currentWeight || 0
      weightPercent.value =
        Math.round(
          ((res.data.originWeight - res.data.currentWeight) /
            (res.data.originWeight - res.data.targetWeight)) *
            100 *
            10
        ) / 10

      if (weightPercent.value >= 100) {
        weightPercent.value = 100
      }
    }
  })
  // 减重详细信息
  weight_lose_info({ empi: state.userInfo.empi }).then((res) => {
    state.base = res.data.basalMetabolism
    state.bmi = res.data.bmi
  })
  // 管理方案
  if (isVip.value && !expire.value && state.userInfo.pathId) {
    getManageList()
  }
  if (state.userInfo.dietQuestionState) {
    getRecommendFood()
  }
}

const getManageList = () => {
  // 获取管理方案
  const param = state.userInfo.empi + '/' + state.loginInfo.userId + '?diseaseType=weightLose'
  taskDetail(param).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      manageList.value = res.data
    }
  })
}
const getRecommendFood = () => {
  // 获取今日推荐饮食
  const params = {
    empi: state.userInfo.empi,
    recommendDate: parseTime(new Date(), '{yyyy}-{mm}-{dd}')
  }
  hour.value = new Date().getHours()
  minutes.value = new Date().getMinutes()
  ai_recommend_food(params).then((res) => {
    mealInfo.value = res.data.itemContent ? JSON.parse(res.data.itemContent) : {}
    if (res.data.itemContent && !mealInfo.value.breakfast_plus) {
      mealInfo.value.breakfast_plus = {
        food_items: []
      }
    }
    if (res.data.itemContent && !mealInfo.value.lunch_plus) {
      mealInfo.value.lunch_plus = {
        food_items: []
      }
    }
    if (res.data.itemContent && !mealInfo.value.dinner_plus) {
      mealInfo.value.dinner_plus = {
        food_items: []
      }
    }
    console.log('饮食信息', mealInfo.value)
  })
}

// 获取已减重的值
const getLoseWeight = () => {
  let loseWeight = 0
  if (weightManagePlanData.value) {
    loseWeight =
      Math.round(
        (weightManagePlanData.value.originWeight - weightManagePlanData.value.currentWeight) * 10
      ) / 10
  }
  if (loseWeight > 0) {
    return loseWeight
  } else {
    return 0
  }
}

const resetSave = () => {
  const regex = /\..*\./
  const result1 = regex.test(String(editWeight.value.target))
  const result2 = regex.test(String(editWeight.value.current))
  const result3 = regex.test(String(editWeight.value.origin))
  if (result1 || result2 || result3) {
    uni.showToast({
      title: '体重格式错误，请输入正确体重',
      icon: 'none'
    })
    return
  } else if (Number(editWeight.value.origin) < Number(editWeight.value.target)) {
    uni.showToast({
      title: '初始体重不能小于目标体重',
      icon: 'none'
    })
    return
  } else {
    const params = {
      ...weightManagePlanData.value,
      currentWeight: Number(editWeight.value.current),
      originWeight: Number(editWeight.value.origin),
      targetWeight: Number(editWeight.value.target)
    }
    reset_weight_lose_info(params).then((res) => {
      resetPop.value = false
      init()
    })
  }
}

const targetType = (item: any) => {
  if (item.dateStatus == 2) {
    uni.showToast({
      title: '该健康任务暂未开始',
      icon: 'none'
    })
  } else {
    if (item.templateType == '健康监测') {
      uni.navigateTo({ url: '/packA/pages/healthPortrait/indexTwo' })
    } else if (item.templateType == '健康随访') {
      store.commit('SET_FOLLOW', item)
      if (item.isRead) {
        uni.navigateTo({
          url: '/packA/pages/follows/detail?name=' + item.itemName + '&type=' + 'read'
        })
      } else if (item.dateStatus == 0) {
        uni.navigateTo({
          url: '/packA/pages/follows/detail?name=' + item.itemName + '&type=' + 'timeout'
        })
      } else {
        uni.navigateTo({
          url: '/packA/pages/follows/fillin?name=' + item.itemName
        })
      }
    } else if (item.templateType == '健康宣教') {
      if (item.itemContent && JSON.parse(item.itemContent).id) {
        uni.navigateTo({
          url:
            '/packA/pages/popularScience/detail?id=' +
            JSON.parse(item.itemContent).id +
            '&isreadId=' +
            item.id +
            '&dateStatus=' +
            item.dateStatus
        })
      }
    } else if (item.templateType == '饮食方案') {
      //   if (item.itemContent && !item.isRead) {
      uni.navigateTo({
        // url: '/packA/pages/dailyFood/foodDetail?id=' + item.id
        url: '/packA/pages/smartFood/recommend'
      })
      //   }
    } else if (item.templateType == '运动方案') {
      //   if (item.itemContent && !item.isRead) {
      uni.navigateTo({
        url: '/packA/pages/sportsInformation/sportsDetail?id=' + item.id
      })
      //   }
    } else {
      uni.navigateTo({
        url: '/packA/pages/healthManage/detail?id=' + item.id + '&dateStatus=' + item.dateStatus
      })
    }
  }
}

const saveOrigin = (val: any) => {
  const textArr = val.target.value.split('.')
  if (textArr.length > 1 && textArr[1].length > 1) {
    editWeight.value.origin = Number(Number(textArr[0] + '.' + textArr[1]).toFixed(1))
  }
  if (editWeight.value.origin > 200) {
    editWeight.value.origin = 200
  }
}
const saveTarget = (val: any) => {
  const textArr = val.target.value.split('.')
  if (textArr.length > 1 && textArr[1].length > 1) {
    editWeight.value.target = Number(Number(textArr[0] + '.' + textArr[1]).toFixed(1))
  }
  if (editWeight.value.target > 200) {
    editWeight.value.target = 200
  }
}
const saveCurrent = (val: any) => {
  const textArr = val.target.value.split('.')
  if (textArr.length > 1 && textArr[1].length > 1) {
    editWeight.value.current = Number(Number(textArr[0] + '.' + textArr[1]).toFixed(1))
  }
  if (editWeight.value.current > 200) {
    editWeight.value.current = 200
  }
}

const toFoodQuestion = () => {
  uni.navigateTo({ url: '/packA/pages/smartFood/index' })
}
const toFoodRecommend = () => {
  uni.navigateTo({ url: '/packA/pages/smartFood/recommend' })
}
const toSportsManage = () => {
  uni.navigateTo({ url: '/packA/pages/sportsInformation/sportsGuide' })
}

const toServerPackage = () => {
  uni.navigateTo({ url: '/packA/pages/weightManage/serverPackage' })
}
const toManage = () => {
  uni.navigateTo({ url: '/packA/pages/weightManage/manage' })
}
const toMessage = () => {
  uni.navigateTo({ url: '/pages/im/pages/Conversation/index' })
}
</script>
<style lang="scss" scoped>
.wrap {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;

  &.paddingBottom {
    padding-bottom: calc(144rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
  }

  .img-vipBg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 244rpx;
  }

  .user_info {
    position: relative;
    display: flex;
    gap: 16rpx;
    align-items: center;
    justify-content: flex-start;

    .img {
      width: 48rpx;
      height: 48rpx;
    }

    .avatar {
      position: absolute;
      top: 0;
      left: 0;
    }

    .name {
      font-size: 36rpx;
      font-weight: 700;
      color: #222;
    }

    .relation {
      width: 80rpx;
      height: 36rpx;
      font-size: 24rpx;
      font-weight: 400;
      line-height: 36rpx;
      color: #999;
      text-align: center;
      background: #fff;
      border: 1rpx solid #e5e6eb;
      border-radius: 4rpx;
    }

    .green {
      color: #fff;
      background: #00d1b6;
    }
  }

  .expired {
    position: absolute;
    top: 42rpx;
    right: 30rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #666;
  }

  .expire-time {
    display: inline-block;
    padding: 6rpx 16rpx;
    margin-top: 16rpx;
    font-size: 20rpx;
    font-weight: 500;
    color: #dcf6ff;
    background: linear-gradient(272deg, #4a778d 0%, #2f766f 42%, #1a484c 73%, #4a778d 98%);
    border-radius: 4rpx;
  }

  .weight-mana {
    width: 100%;
    padding: 32rpx;
    margin: 32rpx 0;
    background: #fff;
    border-radius: 24rpx;

    .weight-basic-text {
      font-size: 24rpx;
      font-weight: 400;
      color: #666;
    }

    .weight-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16rpx;

      .reset {
        padding: 7rpx 24rpx;
        font-size: 24rpx;
        font-weight: 500;
        color: #fff;
        background: #00d1b6;
        border-radius: 24rpx;
      }
    }

    .weight-mode {
      .reduced-weight {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 56rpx;
        margin-bottom: 30rpx;
        text-align: center;

        .weight-value {
          font-size: 56rpx;
          font-weight: 700;
          color: #222;
        }
      }

      .weight-progress {
        position: relative;
        width: 100%;
        height: 12rpx;
        margin: 22rpx 0 24rpx;
        background: #f0f5f4;
        border-radius: 32rpx;

        .progress-bar {
          position: absolute;
          top: -7rpx;
          z-index: 2;
          width: 25rpx;
          height: 25rpx;
          background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
          border: 4rpx solid #e2fffb;
          border-radius: 50%;
        }

        .progress-bar-bg {
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          height: 12rpx;
          background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%), #f0f5f4;
          border-radius: 32rpx;
        }

        .progress-bar-expire {
          background: #ccc;
          border: 4rpx solid #f4f4f4;
        }

        .progress-bar-bg-expire {
          background: #ccc;
        }
      }

      .weight-grid {
        display: flex;
        gap: 16rpx;
        justify-content: space-between;
        // margin-bottom: 48rpx;

        .weight-item {
          display: flex;
          flex-direction: column;
          text-align: center;

          .weight-value {
            margin-top: 12rpx;
            font-size: 40rpx;
            font-weight: 700;
            color: #222;
          }
        }
      }
    }
  }

  .bmi {
    width: 100%;
    padding: 36rpx 32rpx 0;
    margin-bottom: 32rpx;
    background: #fff;
    border-radius: 24rpx;

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18rpx;

      .unit {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-weight: 700;
        color: #222;

        .tag {
          display: inline-block;
          width: 72rpx;
          height: 40rpx;
          margin-left: 12rpx;
          font-size: 24rpx;
          font-weight: 500;
          line-height: 40rpx;
          color: #fff;
          text-align: center;
          background: #5c8eff;
          border-radius: 20rpx 20rpx 20rpx 0rpx;
        }

        .green {
          background: #22cfaa;
        }

        .orange {
          background: #ff813c;
        }

        .red {
          background: #ff503d;
        }
      }

      .num {
        font-size: 40rpx;
        font-weight: 700;
        color: #222;
      }
    }

    .range {
      margin-bottom: 32rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #666;

      .range-num {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 48rpx;

        .img-arrow {
          position: absolute;
          width: 24rpx;
          height: 24rpx;
        }
      }

      .range-color {
        display: flex;
        gap: 4rpx;
        justify-content: space-between;
        margin-bottom: 24rpx;

        .block {
          width: 24.5%;
          height: 12rpx;
          border-radius: 32rpx;
        }

        .low {
          background: #5c8eff;
        }

        .normal {
          background: #22cfaa;
        }

        .high {
          background: #ff813c;
        }

        .fat {
          background: #ff503d;
        }
      }

      .range-text {
        display: flex;
        justify-content: space-around;
      }
    }

    .cell {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 108rpx;
      border-bottom: 1rpx solid #e5e6eb;

      &:last-child {
        border: none;
      }

      .left {
        font-size: 30rpx;
        font-weight: 400;
        color: #222;
      }

      .right {
        font-size: 40rpx;
        font-weight: 700;
        color: #222;

        text {
          margin-left: 8rpx;
          font-size: 30rpx;
          font-weight: 400;
          color: #666;
        }
      }
    }
  }

  .bgColor1 {
    background: linear-gradient(149deg, #e3f5ff 0%, #f3faff 50%, #d4eaff 100%);
  }

  .bgColor2 {
    background: linear-gradient(149deg, #d9f9f7 0%, #f6ffff 50%, #bee8f6 100%);
  }

  .box {
    position: relative;
    padding: 32rpx;
    margin-bottom: 32rpx;
    border: 2rpx solid #fff;
    border-radius: 24rpx;

    .click-btn {
      display: inline-block;
      height: 48rpx;
      padding: 0 24rpx;
      font-size: 24rpx;
      font-weight: 500;
      line-height: 48rpx;
      color: #fff;
      background: #00d1b6;
      border: 1rpx solid #00d1b6;
      border-radius: 38rpx;

      &.on {
        color: #00d1b6;
        background: #fff;
        border-color: #00d1b6;
      }

      &.unfinished {
        color: #666;
        background: #fff;
        border-color: #cfcfcf;
      }

      &.noStart {
        opacity: 0.5;
      }
    }

    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .top_title {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
      }

      .top_button {
        padding: 4rpx 24rpx;
        font-size: 28rpx;
        font-weight: 500;
        color: #fff;
        background: linear-gradient(138deg, #ffc49f 0%, #ff2600 100%);
        border: 2rpx solid #fff;
        border-radius: 24rpx;
      }

      .take-more {
        font-size: 28rpx;
        font-weight: 400;
        color: #666;

        .img-more {
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
          transform: translateY(4rpx);
        }
      }
    }

    .content {
      display: flex;
      gap: 24rpx;
      justify-content: space-between;
      padding: 24rpx;
      background: #fff;
      border-radius: 16rpx;

      .img_left {
        width: 240rpx;
        height: 160rpx;
        border-radius: 16rpx;
      }

      .right {
        width: 310rpx;

        .right_title {
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
        }

        .right_content {
          margin-top: 16rpx;
          margin-bottom: 8rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }
      // 运动部分
      .sports {
        width: 49%;
        padding: 32rpx 0;
        text-align: center;
        background: #fff;
        border: 1rpx solid #e5e6eb;
        border-radius: 16rpx;
        transform: rotateZ(360deg);

        .sports-text {
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
        }

        .sport-icon {
          width: 96rpx;
          height: 96rpx;
          margin: 16rpx auto;
          line-height: 96rpx;
          text-align: center;
          vertical-align: middle;
          background: #f2fdfb;
          border-radius: 8rpx;

          .icons {
            font-size: 64rpx;
            color: #00d1b6;
          }
        }

        .sports-time {
          margin-top: 16rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: #666;
        }
      }
    }

    .meal-content {
      padding: 24rpx;
      background: #fff;
      border-radius: 16rpx;

      .meal {
        margin-bottom: 24rpx;

        &:last-child {
          margin: 0;
        }

        .title {
          font-size: 32rpx;
          font-weight: 700;
          color: #222;
        }

        .items {
          margin-top: 24rpx;

          .meal-name {
            margin-bottom: 4rpx;
            font-size: 28rpx;
            font-weight: 700;
            color: #222;
          }

          .meal-components {
            width: 574rpx;
            font-size: 24rpx;
            font-weight: 400;
            color: #999;
          }
        }
      }
    }

    .box_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 22rpx;

      .title_img {
        width: 32rpx;
        height: 32rpx;
        margin-right: 16rpx;
      }

      .title_text {
        font-size: 36rpx;
        font-weight: 700;
        color: #222;
      }

      .take-more {
        font-size: 28rpx;
        font-weight: 400;
        color: #666;

        .img-more {
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
          transform: translateY(4rpx);
        }
      }
    }

    .no-data {
      width: 100%;
      height: 296rpx;
      padding-top: 48rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #666;
      text-align: center;
      background: #fff;
      border-radius: 16rpx;

      .img_nodata {
        width: 194rpx;
        height: 160rpx;
      }
    }

    .list {
      &.max-height {
        max-height: 530rpx;
        overflow: hidden;
      }

      .item {
        box-sizing: border-box;
        height: 158rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        background: #fff;
        border-radius: 12rpx;

        .top {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 16rpx;

          .title {
            display: flex;
            align-items: center;
            font-size: 32rpx;
            font-weight: 700;
            color: #222;

            .title_img {
              width: 34rpx;
              height: 34rpx;
              margin-right: 16rpx;
            }
          }

          .time {
            font-size: 28rpx;
            font-weight: 400;
            color: #666;
          }
        }

        .bottom {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .text {
            max-width: 416rpx;
            padding: 8rpx 16rpx;
            overflow: hidden;
            font-size: 24rpx;
            font-weight: 400;
            color: #666;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: #fafafa;
            border-radius: 4rpx;
          }

          .finished {
            color: #00d1b6;
            background: #fff;
            border: 1rpx solid #00d1b6;
          }
        }
      }
    }

    .down-more {
      height: 40rpx;
      margin-top: 24rpx;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: #222;
      text-align: center;

      .img-downmore {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
        transform: translateY(4rpx);

        &.flip {
          transform: translateY(4rpx) rotateX(180deg);
        }
      }
    }

    .locked {
      filter: blur(20rpx);
    }

    .back_img {
      position: absolute;
      top: 0;
      right: 14rpx;
      z-index: 1;
      width: 194rpx;
      height: 180rpx;
    }

    .unlock {
      position: absolute;
      top: 162rpx;
      left: 92rpx;
      z-index: 2;
      width: 502rpx;
      height: 84rpx;
      font-size: 30rpx;
      font-weight: 500;
      line-height: 84rpx;
      color: #fff;
      text-align: center;
      background: linear-gradient(316deg, #00cfb4 0%, #0fe3c8 100%);
      border-radius: 16rpx;

      .more {
        width: 32rpx;
        height: 32rpx;
        margin-left: 8rpx;
        transform: translateY(4rpx);
      }
    }

    .overlay {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      height: 100%;
      padding-top: 178rpx;
      font-size: 30rpx;
      font-weight: 500;
      color: #222;
      text-align: center;
      border-radius: 16rpx;
    }

    .padding-188 {
      padding-top: 188rpx;
    }
  }

  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    display: flex;
    gap: 24rpx;
    justify-content: space-between;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1rpx solid #e5e6eb;

    .fixed-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 500;
      color: #fff;
      background: linear-gradient(95deg, #ff9a2d 0%, #ff4d00 100%), #00d1b6;
      border-radius: 44rpx;
    }
  }

  .u-popup {
    .title {
      height: 108rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 108rpx;
      color: #222;
      text-align: center;
      border-bottom: 1rpx solid #e5e6eb;
    }

    .weight-reset-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 108rpx;
      padding: 0 32rpx;
      margin-bottom: 24rpx;
      background: #fafafa;
      border: 1rpx solid #e5e6eb;
      border-radius: 16rpx;

      .left {
        font-size: 30rpx;
        font-weight: 500;
        color: #222;
      }

      .right {
        display: flex;
        align-items: center;

        .popup_input {
          font-size: 30rpx;
          font-weight: 400;
          color: #222;
          text-align: right;
        }

        .img-more {
          width: 32rpx;
          height: 32rpx;
        }
      }
    }

    .save {
      padding: 24rpx 32rpx;

      .save-btn {
        width: 100%;
        height: 88rpx;
        font-size: 32rpx;
        font-weight: 700;
        line-height: 88rpx;
        color: #fff;
        text-align: center;
        background: #00d1b6;
        border-radius: 44rpx;
      }
    }
  }
}
</style>
